<script setup>
import { marked } from 'marked'
import {computed} from "vue";
const props = defineProps({
  content: {
    type: String,
    required: true
  }
})
const renderer = new marked.Renderer();

renderer.link = ({ href, title, text }) => {
  return `<a href="${href}" title="${title}" target="_blank">${text}</a>`;
};
const compiledMarkdown = computed(() => {
  return marked(props.content, {
    renderer
  });
})
</script>

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<style scoped lang="scss">

</style>
